<template>
    <popup
        title="详情信息"
        :show="pupupShow"
        confirmButtonText=""
        cancelButtonText=""
        width="800px"
        @close="handleClose()"
    >
        <div class="p-6">
            <div class="pb-3">记录ID：{{ details.id }}</div>
            <div class="pb-3">记录时间：{{ details?.create_time || '-' }}</div>
            <div class="pb-3">来源的IP：{{ details?.ip || '-' }}</div>

            <div class="border-t pt-3">
                <div class="mb-1 text-lg font-bold">消耗情况</div>
                <el-table v-if="details.usages.length > 0" :data="details.usages">
                    <el-table-column prop="name" label="模块名称"/>
                    <el-table-column prop="alias" label="AI模型">
                        <template #default="{ row }">
                            {{  row?.alias || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="use_points" :label="`消耗积分`">
                        <template #default="{ row }">
                            {{  row?.use_points || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_tokens" :label="`消耗Tokens`">
                        <template #default="{ row }">
                            {{  row?.total_tokens || '-' }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="mt-6">
                <div class="mb-1 text-lg font-bold">提问问题</div>
                <div class="p-3 mb-4 bg-page">
                    {{ details?.question || '-' }}
                </div>
            </div>

            <div v-if="details?.thinks">
                <div class="mb-1 text-lg font-bold">思考内容：</div>
                <div class="p-3 bg-page">
                    {{ details?.thinks || '-' }}
                </div>
            </div>

            <div>
                <div class="mb-1 text-lg font-bold">回复内容：</div>
                <div class="p-3 bg-page">
                    {{ details?.answer || '-' }}
                </div>
            </div>
        </div>
    </popup>
</template>

<script setup lang="ts">
const emits = defineEmits(['close'])

const props = withDefaults(
    defineProps<{
        details: any
        show: boolean
    }>(),
    {
        show: false
    }
)

const pupupShow = ref<boolean>(false)

const handleClose = () => {
    emits('close')
    pupupShow.value = false
}

watch(
    () => props.show,
    (value) => {
        pupupShow.value = value
    }, {
        immediate: true
    }
)
</script>
